<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.cr.model.Customer"%>
<%@ page import="com.cr.model.Cloth"%>
<%@ page import="com.cr.service.ClothService"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Clothing Rental</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="script/main.js"></script>
  </head>
  
  <body>
   	<jsp:include page="header.jsp"></jsp:include>
    <div id="content">
    	<div id="search">
    		<p><input id="searcher" type="text"/></p>
    	</div>
    	<div id="clothes">
    		<%
    			ClothService service=new ClothService();
    			String condition="";
    			String name=request.getParameter("name");
    			if(name!=null && !name.equals(""))
    			{
    				condition=" name like '%"+name+"%'";
    			}
    			List<Cloth> list=service.getClothes(condition);
    		 %>
    		 <div>
    		 		<div id="cloth_table">
    		 			<table>
    		 				<%
    		 					Customer customer=null;
    		 					if(session.getAttribute("customer")!=null)
    		 					{
    		 						customer=(Customer)session.getAttribute("customer");
    		 					}
			    		 		for(int i=0;i<list.size();i++)
			    		 		{
			    		 			Cloth cloth=list.get(i);
			    		 			if(i%3==0)
			    		 			{
			    		 				out.print("<tr>");
			    		 			}
			    		 			out.print("<td>");
			    		 			out.print("<div class='cloth_container'>");
			    		 			out.print("<div class='cloth_photo'>");
			    		 			out.print("<img src='"+cloth.getPicture().get(0)+"' alt='"+cloth.getName()+"' class='cloth_img' />");
			    		 			out.print("<div>￥"+cloth.getPrice()+"RMB/Day</div>");
			    		 			out.print("<div>"+cloth.getName()+"</div>");
			    		 			out.print("<div><a href='cloth.jsp?id="+cloth.getId()+"' target='_blank'>View</a>");
			    		 			if(customer!=null)
			    		 			{
			    		 				out.print("<input type='button' value='Add' onclick='addToCart("+cloth.getId()+",\""+cloth.getPicture().get(0)+"\",\""+cloth.getName()+"\");'/>");
			    		 			}
			    		 			out.print("</div>");
			    		 			out.print("</div>");
			    		 			out.print("</div>");
			    		 			out.print("</td>");
			    		 			
			    		 			if(i%3==2)
			    		 			{
			    		 			out.print("</tr>");}
			    		 	 	}
			    		 	  %>
    		 			</table>
    		 		</div>
    		 		<div id="cart_table">
    		 			<div id="cart">
    		 				<table>
    		 					<%
    		 						if(customer==null)
    		 						{
    		 							out.print("To order please <a href='login.jsp'>login</a> first");
    		 						}
    		 					 %>
    		 				</table>
    		 				<%
    		 					if(customer!=null)
    		 					{
    		 				 %>
    		 				<div>
    		 					<span class="order" onclick="order();">Order</span>
    		 				</div>
    		 				<%
    		 					}
    		 				 %>
    		 			</div>
    		 		</div>
    		 </div>
    	</div>
    	<div id="customerinfo">
    		<div class="need">Please input below information(the field mark '*' need necessary)</div>
    		<div class="title">client information</div>
    		<table border="1">
    			<tr>
    				<td>Client Name：</td>
    				<td><input type="text" id="clientname" /><span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>Province：</td>
    				<td><input type="text" id="province" /><span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>Address：</td>
    				<td><input type="text" id="address" /><span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>Mobile Phone：</td>
    				<td><input type="text" id="phone" /><span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>E-mail：</td>
    				<td><input type="text" id="email" /><span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>Postal Code：</td>
    				<td><input type="text" id="postcode" /></td>
    			</tr>
    		</table>
    		<div class="title">payment way and send way</div>
    		<table border="1">
    			<tr>
    				<td>Payment Way：</td>
    				<td><input type="radio" id="payway1" name="payway" value="Cash on delivery"  />Cash on delivery<input type="radio" id="payway2" name="payway" value="Bank transfer" />Bank transfer<span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>Send Way：</td>
    				<td><input type="radio" id="sendway1" name="sendway" value="ZJS Express"  />ZJS Express<input type="radio" id="sendway2" name="sendway" value="Company Express" />Company Express<span class="need">*</span></td>
    			</tr>
    			<tr>
    				<td>Cost：</td>
    				<td>Free</td>
    			</tr>
    		</table>
    		<div class="title">rent message</div>
    		<table border="1">
    			<tr>
    				<td>Rent days：</td>
    				<td><input type="text" id="day"/><span class="need">*</span></td>
    			</tr>
    		</table>
    		<input type="checkbox" id="agree" /> Agree the contract<a href="javascript:seeContract();">see detail</a>
    		<div id="contract" class="easyui-window" title="Contract detail" style="width:600px;height:500px;text-align:left;padding-left:5px;"  
        				data-options="minimizable:false,maximizable:false,collapsible:false,modal:true,closed:true">
    			<p>The lessor: Beijing Zhong Ge Clothing </p>
				<p>Tenant: Customer </p>
				<p>Base on <<LAW OF THE PEOPLE'S REPUBLIC OF CHINA ON EMPLOYMENT CONTRACTS >> In order to define the relationship between right and duty, The two Parties have agreed to enter into this agreement after negotiation. Sign this contract.</p>
				<p>term of lease: total: ( ) months </p>
				<p>lessor give the costume to tenant from     to     </p>
				<p>If both sides have situations as follows: The lessor could terminate the contract and take back the costumes</p>
				<p>1.	Tenant rent or sell the costume to others without lessor’s permission</p>
				<p>2.	Tenant engaged in illegal activities and do harm to public interest.</p>
				<p>3.	Tenant do not pay rental for about 2 months </p>
				<p>If tenant refuse to pay the rental after the deadline, the lessor has rights to resort to proceeding and The tenant should be responsible for the loss of lessors.</p>"
    		</div>
    		
    		<div>
    			<span class="order" onclick="commit();">Commit</span><span class="hand" onclick="back();">Back</span>
    		</div>
    	</div>
    </div>
    <jsp:include page="footer.jsp"></jsp:include>
  </body>
</html>
